<template>
  <div class="m-card" :id="info.m_id" @click="selectClick">
    <div class="m-card-mask isVisible">
      <div class="sub">
        <el-icon size="20" class="select"><Select /></el-icon>
        <div class="triangle"></div>
      </div>
    </div>
    <div class="m_name">{{ info.material_name }}</div>
    <div v-for="(ele, j) in info.conInfo">
     <template v-if="j==0">
      <div v-if="info.type == 'news'" class="imgcon">
        <el-image
          style="width: 100%; height: 150px; vertical-align: top"
          :src="info.conInfo[0].image_url"
          fit="cover"
        />
        <el-text class="title" line-clamp="1">{{
          info.conInfo[0].title
        }}</el-text>
      </div>
      <div v-if="info.type == 'text'" class="textcon">
        <el-text>{{ info.conInfo[0].title }} </el-text>
      </div>

      <div v-for="(item, index) in info.conInfo[0].btn_info" class="btnItem">
        <div v-if="item.btn_type == '1'" class="flex justify-between">
          <el-text class="m-card-color" line-clamp="1"
            >{{ item.title }}
          </el-text>
          <el-icon size="16" class="m-card-color">
            <Link />
          </el-icon>
        </div>
        <div v-if="item.btn_type == '2'" class="flex justify-between">
          <el-text class="m-card-color" line-clamp="1"
            >{{ item.title }}
          </el-text>
          <el-icon size="16" class="m-card-color">
            <CirclePlus />
          </el-icon>
        </div>
        <div v-if="item.btn_type == '4'" class="flex justify-between">
          <el-text class="m-card-color" line-clamp="1"
            >{{ item.title }}
          </el-text>
          <el-icon size="16" class="m-card-color">
            <PhoneFilled />
          </el-icon>
        </div>
        <div v-if="item.btn_type == '5'" class="flex justify-between">
          <el-text class="m-card-color" line-clamp="1"
            >{{ item.title }}
          </el-text>
          <el-icon size="16" class="m-card-color">
            <Share />
          </el-icon>
        </div>
        <div v-if="item.btn_type == '6'" class="flex justify-between">
          <el-text class="m-card-color" line-clamp="1"
            >{{ item.title }}
          </el-text>
          <el-icon size="16" class="m-card-color">
            <MuteNotification />
          </el-icon>
        </div>
        <div v-if="item.btn_type == '7'" class="flex justify-between">
          <el-text class="m-card-color" line-clamp="1"
            >{{ item.title }}
          </el-text>
          <el-icon size="16" class="m-card-color">
            <Bell />
          </el-icon>
        </div>
      </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
const emits = defineEmits(["selectFn"]);
import { reactive, ref, onMounted } from "vue";
import {
  CirclePlus,
  Share,
  PhoneFilled,
  MuteNotification,
  Link,
  Bell,
  Select,
} from "@element-plus/icons-vue";
const props = defineProps({
  info: {
    type: Object,
    default: "",
  },
});
const show = ref(false);
const currIndex = ref(null);
onMounted(() => {
  console.log(props.info);
});
const selectClick = () => {
  emits("selectFn");
};

const btnType = {
  "1": "链接按钮",
  "2": "素材回复",
  "3": "",
  "4": "电话按钮",
  "5": "分享按钮",
  "6": "取消通知",
  "7": "订单通知",
};
</script>
<style lang="scss" scoped>
.m_name {
  padding: 15px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}
.m-card {
  border-radius: var(--el-border-radius-base);
  border: var(--el-border);
  overflow: hidden;
  position: relative;

  .m-card-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
    visibility: hidden;
    .select {
      position: absolute;
      top: 7px;
      right: 7px;
      color: #fff;
    }
    .sub {
      position: absolute;
      top: -3px;
      right: -3px;
      width: 50px;
      height: 50px;
      z-index: 3;
      overflow: hidden;
      .triangle {
        width: 0;
        height: 0;
        border-top: 50px solid var(--el-color-primary);
        border-left: 50px solid transparent;
      }
    }
  }
  .m-card-color {
    color: var(--el-color-primary);
  }
  .title {
    border-top: 1px solid var(--el-border-color);
    line-height: 45px;
    height: 45px;
    padding: 0 15px;
  }
  .textcon {
    border-top: 1px solid var(--el-border-color);
    min-height: 60px;
    padding: 15px;
    line-height: 1.5;
  }
  .btnItem {
    border-top: 1px solid var(--el-border-color);
    > div {
      padding: 15px;
    }
  }
}
</style>
